<template>
    <div>
        <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
                :immediate-check="false">
            <van-cell
                    v-for="(good, key) in orderList"
                    :key="key"
                    class="cell">
                <div @click="toDetail(good.id, good.process)">
                    <div class="top">
                        <div class="number">
                            <svg class="icon lq" aria-hidden="true" v-if="good.type==='2'">
                                <use xlink:href="#icon-user-lq"></use>
                            </svg>
                            订单号：{{good.oid}}
                        </div>
                        <div>{{good.process | refundStatus}}</div>
                    </div>
                    <div class="g-body">
                        <order-goods :orderGoods="good.products" :type="type"></order-goods>
                    </div>
                    <div class="total">
                        <div>数量：{{good.products[0].num}}</div>
                        <div>合计：{{good.money}}</div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="btn-body" v-if="good.process===refundTypes.CREATE">
                    <div class="btn1">
                        <cancelRefund class="btn" :refundId="good.id" />
                    </div>
                </div>
            </van-cell>
        </van-list>
        <div v-if="finished" class="no-more">没有更多了</div>
    </div>
</template>

<script>
    import API from '../../../request/api'
    import OrderGoods from "../../../components/User/order-goods";
    import OrderBtn from "../../../components/User/orderbtn";
    import RefundTypes from "../../../common/RefundTypes";
    import cancelRefund from "../../../components/User/cancelRefund";

    export default {
        name: 'refundList',
        components: {OrderBtn, OrderGoods, RefundTypes, cancelRefund},
        data() {
            return {
                refundTypes:RefundTypes.types, //售后进度
                loading: false,
                finished: false,
                page: 1,
                orderList: [],
                type: 1,
                refundId:''
            };
        },
        mounted() {
            this.onLoad();
        },
        methods: {
            toDetail(id, process) {
                if(process===this.refundTypes.AGREE){
                    // 跳转至商家填写物流信息
                    this.$router.push({
                        name: 'refund-wait-return',
                        query: {
                            refundId: id
                        }
                    });
                }else{
                    // 跳转至售后订单详情页
                    this.$router.push({
                        name: 'refund-state',
                        query: {
                            refundId: id
                        }
                    });
                }
            },
            onLoad() {
                if (this.finished === false) {
                    // 异步更新数据
                    let data = {
                        type: 1,
                        page: this.page
                    };
                    this.request.get(API.afterlist, data).then(res => {
                        this.page++;
                        this.orderList = this.orderList.concat(res.list);
                        if (res.total_page < this.page) {
                            this.finished = true;
                        }
                        this.loading = false;
                    }, () => {
                    });
                }
            }
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .van-cell {
        margin-top vw(10)
        padding 0
        .top {
            display flex
            align-items center
            justify-content space-between
            font-size word12
            color main-color
            padding cellPadding cellPadding 0
            .number {
                display flex
                align-items center
                color gray3
                .lq {
                    width vw(24)
                    height vw(24)
                    fill #F8BE43
                    margin-right titleMargin
                }
            }
        }
        .total {
            display flex
            align-items center
            justify-content space-between
            padding 0 cellPadding
        }
        .line {
            width 100vw
            height vw(1)
            background-color #f8f8f8
        }
    }

    .no-more {
        text-align center
        color gray9
        line-height vw(30)
        margin-top smallMargin
    }
    .btn-body{
        display flex
        justify-content space-between
        height vw(45)
        align-items center
        padding 0 cellPadding
        .btn1{
            display flex
            justify-content flex-end
            flex 1
            .btn2{
                btn-gray()
            }
            .btn{
                btn-main()
            }
            div{
                margin-left middleMargin
            }

        }
    }
</style>
